<template>
<div class="topic">
     <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <ul>
                <li v-for="item in list" :key="item.id">
                    <router-link :to="`/home/businessOne/${item.id}`"><img :src="item.app_list_pic_url" alt=""></router-link>
                    <div class="np">{{item.name}}|{{item.floor_price}}元起</div>
                </li>
            </ul>
         </van-list>
    
</div>
  
</template>

<script>
import {listaction} from "@/api/home/business/index.js";
export default {
    data(){
        return{
            list:[],
            loading:false,
            finished:false,
            start:1
        }
    },
    created(){
        listaction()
        .then(res=>{
            console.log(res)
        })
    },
     methods: {
        onLoad(){
            // 不管发送的请求是get还是post 
             listaction(
                 {
                    page: this.start
                 }
             )
            .then(res =>{
                console.log(res);
                // 
                this.list.push(...res.data);
                this.loading = false;
                this.start ++ ;
                if(this.start > res.total){ //4
                    this.finished = true;
                }
            })
        }
    },

}
</script>     

<style>

li img{
    width: 100%;
    height: 210px;
}
li{
    position: relative;
}
.np{
    position: absolute;
    top: 90px;
    left: 80px;
    color: white;
    font-size: 20px;
    font-weight: 900;
}
</style>